<template>
    <view class="uu-search-wrap" :class="{ isCoverStatusBar: isCoverStatusBar }" @click="handleClick">
        <view class="search" :style="style">
            <view class="search-icon"></view>
            <view class="text">
                <input class="text" :type="type" :placeholder="placeholder" v-bind="$attrs"
                    @input="(event) => handleInput(event)" :value="modelValue" :disabled="disabled" />
                <!-- 当 input 被禁用时，添加一个透明覆盖层以允许点击整个组件 -->
                <view v-if="disabled" class="overlay" @click.stop="handleClick"></view>
            </view>
            <view class="clear-icon" :class="{ show: isshowClear && !!modelValue }" @click="handleClear"><uni-icons
                    type="close" size="20" color="#777"></uni-icons></view>
        </view>
    </view>
</template>
<script setup lang="ts">
const props = defineProps({
    isCoverStatusBar: { // 是否覆盖状态栏高度
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: 'text'
    },
    modelValue: { // v-model 绑定的值
        type: String,
        default: ''
    },
    disabled: {   // 是否禁用输入框 
        type: Boolean,
        default: true
    },
    placeholder: { // 输入框占位符
        type: String,
        default: '请输入助教名称'
    },
    isshowClear: { // 是否显示清除按钮
        type: Boolean,
        default: true
    },
    style: { // 组件样式
        type: Object,
        default: () => ({})
    }
})
const emit = defineEmits(['update:modelValue', 'com-click', "clear"])
const handleInput = (event: any) => {
    emit('update:modelValue', event.detail.value ?? event.target.value);
}
const handleClick = (event?: Event) => {
    // 点击组件时不依赖 event.detail.value（覆盖层上没有 value），改为透传当前 modelValue
    emit('com-click', props.modelValue);
}
const handleClear = (event?: Event) => {
    //clear
    emit('clear');
}
</script>
<style lang="less" scoped>
.uu-search-wrap {
    width: 688rpx;
    height: 77rpx;
    // box-sizing: border-box;
    margin: 19rpx 31rpx 23rpx;
    border-radius: 69rpx;
    overflow: hidden;

    .search {
        width: 688rpx;
        height: 77rpx;
        background-color: #fff;
        display: flex;
        align-items: center;

        .search-icon {
            width: 26rpx;
            height: 26rpx;
            margin-left: 54rpx;
            background-image: url('/static/common/search.png');
            background-size: 100% 100%;
        }

        .text {
            margin-left: 15rpx;
            position: relative;
            /* 为 overlay 提供定位上下文 */
            width: 460rpx;

            /* 覆盖层，当 input disabled 时用于捕获点击 */
            .overlay {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0);
                /* 透明，但可接收事件 */
                z-index: 10;
            }

            height: 38rpx;
            font-weight: 400;
            font-size: 27rpx;
            color: #777777;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }

        .clear-icon {
            width: 26rpx;
            height: 26rpx;
            line-height: 26rpx;
            transform: translateX(45rpx);
            display: none;
        }

        .clear-icon.show {
            display: block;
        }
    }

}

.isCoverStatusBar {
    padding-top: var(--status-bar-height);
}
</style>